import React, { useState } from 'react'
import './style.less'
import { SearchBar } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
export default function Index(props) {
  const [valueSeacrh, setvalueSeacrh] = useState('')
  const navigate = useNavigate();
  function keyUpHandle(e) {
    if (valueSeacrh !== '') {
      console.log('first')
      navigate(`/search/${valueSeacrh}`)
    }
  }
  return (
    <div className='searchContent'>
      <div className='city'>
        <Link to='/city' state={{ a: 4 }}>
          <i className='icon-chengshi iconfont'>
          </i>
          <span>
            {props.cityName}
          </span>
        </Link>
      </div>
      <div className='search'>
        <SearchBar style={{
          '--border-radius': '10px',
          '--background': '#ffffff',
          '--height': '32px',
          '--padding-left': '12px',
        }} onBlur={keyUpHandle} value={valueSeacrh} onChange={(e) => { setvalueSeacrh(e) }} />
      </div>

      <div className='order'>
        <Link to={'/order'} >
          <i className='icon-dingdandingdanchaxun iconfont '></i>
          <span>
            订单
          </span>
        </Link>

      </div>
    </div>
  )
}
